<template>
  <div class="flex-col wrapper ai-discouragement">
    <div class="top-modules">
      <div class="menu-wrap">
        <el-button size="mini" type="primary"
          v-for="item in routeList"
         :key="item.path"
                   @click="jumpTo(item.path)"
        >{{item.name}}</el-button>
      </div>
      <h2>AI反诈劝阻民警</h2>
      <GlobalTime />
    </div>
    <div style="display: flex; flex-direction: column; height: calc(30% - 90px); flex:1; gap: 20px;">
      <router-view />
    </div>
  </div>
</template>
<script>
  // @ is an alias to /src

  import Vue from 'vue'
  import api from "@/api/common.api";
  const defaultMenuWidth = '90px'
  export default {
    name: 'aiPage',
    computed: {
      currentRoute() {
        return this.$route.name
      }
    },
    data () {
      return {
        isMenuExpanded: false,
        menuWidth: defaultMenuWidth, // 默认收缩状态的宽度
        routeList: [
          // <el-button size="mini" type="primary">首页</el-button>
          // <el-button size="mini" type="primary">数据导入</el-button>
          // <el-button size="mini" type="primary">任务列表</el-button>
          // <el-button size="mini" type="primary">拨打设置</el-button>
          // <el-button size="mini" type="primary">拨打历史</el-button>

          {
            path: 'aiDiscouragement',
            name: '首页'
          },
          {
            path: 'aiImportData',
            name: '数据导入'
          },
          {
            path: 'aiImportData',
            name: '任务列表'
          },
          {
            path: 'aiImportData',
            name: '拨打设置'
          },
          {
            path: 'aiImportData',
            name: '拨打历史'
          },
        ],
        changeFlag: true,
        pwComfirm: false,
        statementShow: false,
        markerList: [],
        isHovering: false,
        menuTimeout: null,
      }
    },
    methods: {
      toggleMenu() {
        this.isMenuExpanded = !this.isMenuExpanded
        // 清除之前的定时器
        if (this.menuTimeout) {
          clearTimeout(this.menuTimeout)
          this.menuTimeout = null
        }
      },
      jumpTo(name, isExternal) {
        if (isExternal) {
          // 新开标签页
          const path = this.$router.resolve({name});
          window.open(path.href, '_blank')
        }else{
          // 原地跳转
          this.$router.push({name})
        }
      },
    },
    mounted () {
    }
  }
</script>

<style lang="stylus">
  //@import '../../assets/css/aiDiscouragementEle.styl'
  /* 滚动条整体 */
  ::-webkit-scrollbar {
    width: 6px;
  }

  /* 滚动条滑块 */
  ::-webkit-scrollbar-thumb {
    background-color: rgba(67,84,89,0.4);
    border-radius: 4px;
  }

  /* 滚动条轨道 */
  ::-webkit-scrollbar-track {
    background-color: rgba(18,28,31,0.25);
    border-radius: 4px;
  }

  .ai-discouragement{
    display: flex;
    flex-direction: column;


    &.wrapper{
      background: linear-gradient(90deg, #000000, #030F0F);
      background: url('../components/aiDiscouragement/img/page_bg.png') no-repeat 0 0;
      background-size: 100% 100%;

      color: #fff;
      padding: 10px;
      height: 100vh;
      box-sizing: border-box;
      // height: 100%;
      // overflow: auto;
    }
    .top-modules{
      padding: 0 25px;
      background: url('../components/aiDiscouragement/img/title_bg.png') no-repeat 0 0;
      //background-size: 1911px 82px;
      background-size: 100% 100%;
      height: 82px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      h2{
        position: absolute;
        left: 50%;
        transform translateX(-50%);
        height: 51px;
        font-family: YouSheBiaoTiHei;
        font-size: 36px;
        line-height: 10px;
        letter-spacing: 10px;
        text-shadow: 0px 0px 8px rgba(94,228,255,0.38);
      }
    }
  }




  /* 在全局 CSS 或 App.vue 中添加 */
  @media (min-width: 3680px) {
    .ai-discouragement {
      transform: scale(2.1); /* 4K是1920的2倍 */
      transform-origin: 0 0;
      width: 50%;  /* 缩放后实际占用的宽度 */
      height: 60%; /* 缩放后实际占用的高度 */
      .section_1 {
        transform: translateY(20px);
      }
    }
  }
  /* 在全局 CSS 或 App.vue 中添加 */
  @media (min-width: 7680px) {
    .ai-discouragement {
      transform: scale(4); /* 8K / 1920 = 4 */
      transform-origin: 0 0;
      width: 25%; /* 缩放后宽度还原为 1920px */
      height: 25%; /* 缩放后高度还原为 1080px */
    }
  }

</style>
<style lang="stylus">
  /deep/ .el-main  {
    padding: 0!important;
  }
</style>